/* 全局CSS变量 */
:root {
  --dm-border-radius: 0.4rem;
  --dm-sb-size: 1.2rem; /* 滚动条宽/高 */
  --dm-sb-radius: 1.2rem; /* 圆角 */
  --dm-sb-track: rgb(0 0 0 / 6%); /* 轨道颜色（浅） */
  --dm-sb-thumb: rgb(0 0 0 / 28%); /* 拖块默认 */
  --dm-sb-thumb-hover: rgb(0 0 0 / 42%); /* 悬浮 */
  --dm-sb-thumb-active: rgb(0 0 0 / 56%); /* 按下 */

  /* 字体家族 */
  --dm-font-family-base: 'Quicksand', sans-serif;

  /* Rouge Script */
  --dm-font-family-script: 'Rouge Script', cursive;

  /* 标题 */
  --dm-font-h1-size: 3.6rem;
  --dm-font-h1-weight: 400; /* Regular */
  --dm-font-h2-size: 2.8rem;
  --dm-font-h2-weight: 600; /* SemiBold */
  --dm-font-h3-size: 2.4rem;
  --dm-font-h3-weight: 500; /* Medium */

  /* 正文 */

  /* 1.6rem */
  --dm-font-body-text: 1.6rem;
  --dm-font-body-line: 1.6rem;
  --dm-font-body-weight: 400; /* Medium */
  --dm-font-body1-size: 1.8rem;
  --dm-font-body1-weight: 500; /* Medium */
  --dm-font-body1-line: auto;
  --dm-font-body2-size: 1.8rem;
  --dm-font-body2-weight: 400; /* Regular */
  --dm-font-body2-line: 2.8rem;
  --dm-font-body3-size: 1.6rem;
  --dm-font-body3-weight: 400; /* Regular */
  --dm-font-body3-line: 2.4rem;

  /* ========= 主色 ========= */
  --dm-color-primary: #ccb590; /* 主色：用于强调性组件、按钮、链接等 */
  --dm-color-dark: #272727; /* 深灰：标题/正文重点文字 */

  /* 正文颜色 */
  --dm-color-text-light: #383838;
  --dm-color-text: #3c3c3c; /* 普通文本 */
  --dm-color-white: #fff; /* 白色：banner/标题背景 */
  --dm-color-black: #000; /* 黑色：不透明度降低的蒙版 */

  /* ========= 提示色 ========= */
  --dm-color-warning: #ff6c6c; /* 提示、必选项标识 */

  /* ========= 收藏色，喜欢色(粉色) ========= */
  --dm-color-like: #ffb3b2;

  /* ========= 辅助色 ========= */
  --dm-color-hover: #070322; /* 按钮 hover，深色背景 */
  --dm-color-subtext: #b0b0b0; /* 辅助提示文案 */
  --dm-color-border: #d9d9d9; /* 分割线/表格边框 */
  --dm-color-bg-light: #f5f5f5; /* 浅色背景（详情页容器） */
  --dm-color-bg-faq: #ccb590; /* FAQ 背景，16% 主色透明度 */

  /* #15141C */
  --dm-color-gb: #15141c;

  /* ========= 灰阶扩展 ========= */
  --dm-gray-100: #f5f5f5;
  --dm-gray-200: #d9d9d9;
  --dm-gray-300: #b0b0b0;
  --dm-gray-400: #3c3c3c;
  --dm-gray-500: #242424;
  --dm-gray-900: #000;
}

.dm-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  padding: 1.4rem 6.1rem;
  height: 5.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  background-color: #fff;
  box-shadow: 0 0 1.2rem rgb(0 0 0 / 23.9%);
}

.dm-toast-success {
  font-size: var(--dm-font-body1-size);
  font-weight: var(--dm-font-h1-weight);
  line-height: var(--dm-font-h3-size);
}

@media (width <= 768px) {
  :root {
    --dm-font-h1-size: 6.6rem !important;
    --dm-font-h1-weight: 400;
    --dm-font-h2-size: 4.8rem;
    --dm-font-h2-weight: 400;
    --dm-font-h3-size: 4rem;
    --dm-font-h3-weight: 500;
    --dm-font-body1-size: 3.4rem;
    --dm-font-body1-line: 4.2rem;
    --dm-font-body2-size: 2.6rem;
    --dm-font-body-text: 1.8rem;
    --dm-font-body-line: 2.4rem;
    --dm-sb-size: 1.8rem;
    --dm-sb-radius: 1.6rem;
  }
}
